import React, { Component } from 'react';
import { province } from 'antd-mobile-demo-data';
import { StickyContainer, Sticky } from 'react-sticky';
import { ListView, List, SearchBar } from 'antd-mobile';
const { Item } = List;
function genData(ds, provinceData) {
  const dataBlob = {};
  const sectionIDs = [];
  const rowIDs = [];
  Object.keys(provinceData).forEach((item, index) => {
    sectionIDs.push(item);
    dataBlob[item] = item;
    rowIDs[index] = [];
    provinceData[item].forEach((jj) => {
      rowIDs[index].push(jj.value);
      dataBlob[jj.value] = jj.label;
    });
  });
  return ds.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs);
}
class Demo extends Component {
  constructor(props) {
    super(props);
    const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
    const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
    const dataSource = new ListView.DataSource({
      getRowData,
      getSectionHeaderData: getSectionData,
      rowHasChanged: (row1, row2) => row1 !== row2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
    });
    this.state = {
      inputValue: '',
      dataSource,
      isLoading: true,
    };
  }
  componentDidMount() {
    // simulate initial Ajax
    setTimeout(() => {
      this.setState({
        dataSource: genData(this.state.dataSource, province),
        isLoading: false,
      });
    }, 100);
  }
  selectCity(rowData) {
    console.log(1111, rowData, this.props)
    this.props.setCity(rowData)
  }
  onSearch = (val) => {
    const pd = { ...province };
    Object.keys(pd).forEach((item) => {
      const arr = pd[item].filter(jj => jj.spell.toLocaleLowerCase().indexOf(val) > -1);
      if (!arr.length) {
        delete pd[item];
      } else {
        pd[item] = arr;
      }
    });
    this.setState({
      inputValue: val,
      dataSource: genData(this.state.dataSource, pd),
    });
  }
  render() {
    return (
      <StickyContainer>
        <Sticky>
          {({
            style,
          }) => (
            <SearchBar
              style={{ ...style, zIndex: 111 }}
              value={this.state.inputValue}
              placeholder="Search"
              onChange={this.onSearch}
              onClear={() => { console.log('onClear'); }}
              onCancel={() => { console.log('onCancel'); }}
            />
          )}</Sticky>
        {this.props.children}
        <ListView.IndexedList
          dataSource={this.state.dataSource}
          className="am-list sticky-list"
          useBodyScroll
          renderSectionWrapper={sectionID => (
            <StickyContainer
              key={`s_${sectionID}_c`}
              className="sticky-container"
              style={{ zIndex: 4 }}
            />
          )}
          renderSectionHeader={sectionData => (
            <Sticky>
              {({
                style,
              }) => (
                <div
                  className="sticky"
                  style={{
                    ...style,
                    zIndex: 3,
                    top: "45px",
                    fontSize: "18px",
                    color: "blue",
                  }}
                >{sectionData}</div>
              )}
            </Sticky>
          )}
          renderRow={rowData => (<Item onClick={() => { this.selectCity(rowData) }}>{rowData}</Item>)}
          quickSearchBarStyle={{
            top: 85,
          }}
          delayTime={10}
          delayActivityIndicator={<div style={{ padding: 25, textAlign: 'center' }}>rendering...</div>}
        />
      </StickyContainer>);
  }
}
export default Demo;